<script setup lang='ts'>
type PersonItem = { id: number, username: string, age: number }
const { columns = [], data = [] } = defineProps<{
    // 不能使用string 可以使用keyof PersonItem来指定类型
    columns?: Array<{ label: string, field: keyof PersonItem }>,
    data?: Array<PersonItem>
}>()

</script>

<template>
    <table border="1">
        <thead>
            <th align="center" v-for="item in columns" :key="item.field">{{ item.label }}</th>
        </thead>
        <tbody>
            <tr v-for="(item, index) in data" :key="item.id">
                <td>{{ item[columns[0].field] }}</td>
                <td>{{ item[columns[1].field] }}</td>
                <td>{{ item[columns[2].field] }}</td>
                <!-- 返回{"ret":{"id":1,"username":"张小华",age:21}} -->
                <td><slot name="op" :ret="item" :index="index"></slot></td>
            </tr>
        </tbody>
    </table>
</template>

<style scoped>
table thead {
    background-color: #3f6df0;
    color: #fff;
}

table thead th,table td {
    width: 100px;
    text-align: center;
    color: pink;
}
</style>